<script setup lang="ts">
import {onMounted, ref, defineProps} from "vue";
import EZUIKit from "ezuikit-js";

interface VideoYsProps {
  accessToken: string,//萤石token at.cunxtrcr9jt5gzqicyv191mhav5ikwby-2rvefolx43-1ijidhh-fhn7kziou
  url: string,// 播放地址 ezopen://open.ys7.com/${设备序列号}/{通道号}.live
  width: number,
  height: number
}

const {accessToken, url, width, height} = defineProps<VideoYsProps>()
const ezvizPlay = ref(null);

const initVideo = () => {
  if (ezvizPlay.value) {
    return;
  }
  //获取萤石token
  ezvizPlay.value = new EZUIKit.EZUIKitPlayer({
    autoplay: true,  // 默认播放
    //视频播放包裹元素
    id: "video-ys-container",

    accessToken: accessToken,
    url: url,
    template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
    plugin: ['talk'], // 加载插件，talk-对讲
    footer: ['talk', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
    audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
    width: width,//元素宽度
    height: height,//视频元素高度
  })
}
onMounted(() => {
  initVideo()
})
</script>

<template>
  <div>
    <div id="video-ys-container"></div>
  </div>
</template>